<template>
	<view class="accept-page">
		<NavBar title="验收订单"/>
		<view class="goods-list">
			<view class="goods-item th flex-center">
				<view class="name"> 商品名称 </view>
				<view class="num"> 商品总数 </view>
				<view class="num"> 合格数量 </view>
			</view>
			<view class="goods-item flex-center" v-for="item in goodsList" :key="item.sku">
				<view class="name"> {{ item.name }} </view>
				<view class="num"> {{ item.quantity }} </view>
				<view class="num">
					<wd-input-number v-model="item.quantity2" :min="0" />
				</view>
			</view>
		</view>
		<view class="btn-box justify-center">
			<wd-button class="btn" type="info" @tap="cancel"> 取 消 </wd-button>
			<wd-button class="btn" @tap="confirm"> 确 认 </wd-button>
		</view>
	</view>
</template>

<script setup>
	import { computed, ref, watch } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import NavBar from '@/components/NavBar.vue';
	import { acceptanceApi } from '@/api'
	const goodsList = ref([])
	const uid = ref()
	const orderNo = ref()
	const pageType = ref()
	const cancel = () => {
		uni.navigateBack()
	}
	const confirm = () => {
		acceptanceApi({uid: uid.value, data: goodsList.value, no: orderNo.value}).then(res => {
			setTimeout(() => {
				uni.showToast({
					icon: 'none',
					title:'验收成功'
				})
			}, 100)
			uni.navigateBack()
		}).catch(err => {
			uni.showToast({
				icon: 'none',
				title: err.msg
			})
		})
	}
	onLoad((e) => {
		const { no, id, type } = e
		uid.value = id
		orderNo.value = no
		pageType.value = type
		acceptanceApi({no}, 'GET').then(res => {
			console.log(res);
			goodsList.value = res
			goodsList.value.forEach(item => {
				item.quantity2 = Number(item.quantity)
			})
			// userList.value = res.userlists
			// userList.value.forEach(item => {
			// 	item.quantity2 = 0
			// })
			// goodsList.value = res.xiangqing
		})
	})
</script>

<style lang="scss" scoped>
	.accept-page {
		padding: 20rpx 24rpx;
		padding-bottom: 100rpx;
		.goods-list {
			padding: 20rpx;
			border-radius: 20rpx;
			margin-bottom: 30rpx;
			background-color: #fff;
			.th {
				background-color: #e5e5e5;
			}
			.goods-item {
				gap: 10rpx;
				text-align: center;
				border: 1px solid #eee;
				padding: 0 10rpx;
				.name, .num, .num2 {
					height: 88rpx;
					line-height: 88rpx;
				}
				.name {
					flex: 1;
					text-align: left;
				}
				.num {
					width: 180rpx;
					border-left: 1px solid #eee;
				}
			}
		}
		.btn-box {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			gap: 30rpx;
			padding: 20rpx;
			background-color: #fff;
			.btn {
				flex: 1;
			}
		}
	}
</style>
